<template>
  <div class="DcnBottom">
    <CodeCard v-bind="btnDesc">
      <div class="block">
        <span class="demonstration">有默认值</span>
        <sdn-color-picker v-model="color1"></sdn-color-picker>
      </div>
      <div class="block">
        <span class="demonstration">无默认值</span>
        <sdn-color-picker v-model="color2"></sdn-color-picker>
      </div>
    </CodeCard>
  </div>
</template>

<script>

import { ref } from 'vue'

export default {
  components: {
    
  },
  setup() {
    let color1 = '#39k55b'
    let color2 = ref(null)

    let btnDesc = {
      title: "ColorPicker 颜色选择器",
      describe: "用于颜色选择，支持多种格式。",
      codeBlock: ` <div class="block">
        <span class="demonstration">有默认值</span>
        <sdn-color-picker v-model="color1"></sdn-color-picker>
      </div>
      <div class="block">
        <span class="demonstration">无默认值</span>
        <sdn-color-picker v-model="color2"></sdn-color-picker>
      </div>`,
      attrs: [
        {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, { "name": "disabled", "describe": "是否禁用", "type": "boolean", "emun": "—", "default": "FALSE" }, {
          "name": "size",
          "describe": "尺寸",
          "type": "string",
          "emun": "medium / small / mini",
          "default": "—"
        }, {
          "name": "show-alpha",
          "describe": "是否支持透明度选择",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "color-format",
          "describe": "写入 v-model 的颜色的格式",
          "type": "string",
          "emun": "hsl / hsv / hex / rgb",
          "default": "hex（show-alpha 为 false）/ rgb（show-alpha 为 true）"
        }],
      events: [
        { "name": "change", "describe": "当绑定值变化时触发", "params": "当前值" }, {
          "name": "active-change",
          "describe": "面板中当前显示的颜色发生改变时触发",
          "params": "当前显示的颜色值"
        }],
    };
    return {
      btnDesc,
      color1,
      color2
    };
  },
};
</script>

<style lang="stylus">
.DcnBottom {
  .block {
    display flex
    justify-content center
    align-items center
    flex-direction column
    margin-bottom 0.2rem

    .demonstration {
      padding-bottom 0.2rem
      color #666666
    }
  }
}
</style>
